
<template>
    <div v-if="show">
        <el-form class="config-form" label-width="70px" label-position="left">
            <el-form-item label="宽度" v-if="Object.keys(data.options).indexOf('width')>=0">
                <el-input v-model="data.options.width"/>
            </el-form-item>
            <el-form-item label="高度" v-if="Object.keys(data.options).indexOf('height')>=0">
                <el-input v-model="data.options.height"/>
            </el-form-item>
            <el-form-item label="组件尺寸" v-if="Object.keys(data.options).indexOf('size')>=0">
                <el-select v-model="data.options.size">
                    <el-option value="medium" label="medium"/>
                    <el-option value="small" label="small"/>
                    <el-option value="mini" label="mini"/>
                </el-select>
            </el-form-item>
            <el-form-item label="主题" v-if="Object.keys(data.options).indexOf('type')>=0">
                <el-select v-model="data.options.type">
                    <el-option value="" label="primary"/>
                    <el-option value="success" label="success"/>
                    <el-option value="info" label="info"/>
                    <el-option value="warning" label="warning"/>
                    <el-option value="danger" label="danger"/>
                </el-select>
            </el-form-item>
            <el-form-item label="标题颜色：" v-if="Object.keys(data.options).indexOf('colorTitle')>=0 && data.type=='detailTitle'">
                <el-color-picker
                    v-model="data.options.colorTitle"
                />
            </el-form-item>
            <el-form-item label="字体颜色：" v-if="Object.keys(data.options).indexOf('colorContent')>=0 && data.type=='detailTitle'">
                <el-color-picker
                    v-model="data.options.colorContent"
                />
            </el-form-item>
            <el-form-item label="背景色：" v-if="Object.keys(data.options).indexOf('tagColor')>=0">
                <el-color-picker
                    v-model="data.options.tagColor"
                />
            </el-form-item>
            <el-form-item label="字体大小：" v-if="Object.keys(data.options).indexOf('fontSize')>=0">
                <el-input v-model="data.options.fontSize"/>
            </el-form-item>
            <el-form-item label="标题大小：" v-if="Object.keys(data.options).indexOf('fontSizeTitle')>=0 && data.type=='detailTitle'">
                <el-input v-model="data.options.fontSizeTitle"/>
            </el-form-item>
            <el-form-item label="文本大小：" v-if="Object.keys(data.options).indexOf('fontSizeContent')>=0 && data.type=='detailTitle'">
                <el-input v-model="data.options.fontSizeContent"/>
            </el-form-item>
            <el-form-item label="字体重量：" v-if="Object.keys(data.options).indexOf('fontWeight')>=0">
                <el-select v-model="data.options.fontWeight">
                    <el-option value="100" label="100"/>
                    <el-option value="200" label="200"/>
                    <el-option value="300" label="300"/>
                    <el-option value="400" label="400"/>
                    <el-option value="500" label="500"/>
                    <el-option value="600" label="600"/>
                    <el-option value="700" label="700"/>
                </el-select>
            </el-form-item>
            <el-form-item label="边框描边" v-if="Object.keys(data.options).indexOf('hit')>=0">
                <el-switch v-model="data.options.hit" />
            </el-form-item>
            <el-form-item label="排列方式" v-if="Object.keys(data.options).indexOf('textAlign')>=0">
                <el-select v-model="data.options.textAlign">
                    <el-option value="left" label="左对齐"/>
                    <el-option value="right" label="右对齐"/>
                    <el-option value="center" label="居中"/>
                </el-select>
            </el-form-item>
            <el-form-item label="圆角：" v-if="Object.keys(data.options).indexOf('borderRadius')>=0">
                <el-input style="width: 180px;" v-model="data.options.borderRadius"/>
            </el-form-item>
            <el-form-item label="背景色：" v-if="Object.keys(data.options).indexOf('backgroundColor')>=0">
                <el-color-picker
                    v-model="data.options.backgroundColor"
                />
            </el-form-item>
            <el-form-item label="背景图：" v-if="Object.keys(data.options).indexOf('backgroundImage')>=0">
                <el-input style="width: 180px;" v-model="data.options.backgroundImage"/>
            </el-form-item>
            <el-form-item label="颜色：" v-if="Object.keys(data.options).indexOf('color')>=0">
                <el-color-picker
                    v-model="data.options.color"
                />
            </el-form-item>
            <div class="form-item">
                <label>容器内边距/px</label>
                <div class="margin-box">
                    <div class="p-center"/>
                    <el-input type="number" class="left" v-model="data.options.paddingLeft" />
                    <el-input type="number" class="right" v-model="data.options.paddingRight" />
                    <el-input type="number" class="top" v-model="data.options.paddingTop" />
                    <el-input type="number" class="bottom" v-model="data.options.paddingBottom" />
                </div>
            </div>
            <div class="form-item">
                <label>容器外边距/px</label>
                <div class="margin-box">
                    <div class="m-center"/>
                    <el-input type="number" class="left" v-model="data.options.marginLeft" />
                    <el-input type="number" class="right" v-model="data.options.marginRight" />
                    <el-input type="number" class="top" v-model="data.options.marginTop" />
                    <el-input type="number" class="bottom" v-model="data.options.marginBottom" />
                </div>
            </div>
        </el-form>
    </div>
</template>
<style lang="scss" scoped>
    .form-item{
        label{
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            font-weight: 500;
        }
        .margin-box{
            position: relative;
            height: 200px;
            width: 100%;
            border: 1px solid #dcdcdc;
            .p-center,.m-center{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 60px;
                height: 60px;
            }
            .p-center{
                border: 1px dashed #ccc;
            }
            .m-center{
                border: 1px solid #ccc;
            }
            .el-input{
                position: absolute;
                width: 70px;
                height: 30px;
            }
            .left{
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            .right{
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            .top{
                left: 50%;
                top: 20px;
                transform: translateX(-50%);
            }
            .bottom{
                left: 50%;
                bottom: 20px;
                transform: translateX(-50%);
            }
        }
    }
</style>
<script>
export default {
    name: 'StyleConfig',
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        show() {
            if (this.data && Object.keys(this.data).length > 0) {
                return true
            }
            return false
        }
    },
    methods: {

    }
}
</script>
